<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>WebGL Water</title>
            <link rel="stylesheet" href="./css/stylesheet.css">
            <script type="text/javascript" src="./js/gl-matrix.js"></script>
            <script type="text/javascript" src="./js/stats.min.js"></script>
            <script type="text/javascript" src="./js/dat.gui.min.js"></script>
            <script type="text/javascript" src="./js/webgl-debug.js"></script>
            <script type="text/javascript" src="./js/webgl-utils.js"></script>
            <script type="text/javascript" src="./js/shader.js"></script>
            <script type="text/javascript" src="./js/camera.js"></script>
            <script type="text/javascript" src="js/grid.js"></script>
            <script type="text/javascript" src="js/skybox.js"></script>
            <script type="text/javascript" src="./js/water.js"></script>
            <script id="skybox-shader-vs"  type="x-shader/x-vertex">
             uniform mat4 view;
             uniform mat4 projection;
             attribute vec3 aPos;
             varying vec3 texCoord;
             void main() {
                texCoord = aPos;
                vec4 pos = projection * view * vec4(aPos, 1.0);
                gl_Position = pos.xyww;

             }
            </script>
            <script id="skybox-shader-fs"  type="x-shader/x-fragment">
             precision mediump float;
             varying vec3 texCoord;
             uniform samplerCube skybox;
             void main() {
                  gl_FragColor = textureCube(skybox, texCoord);
             }
            </script>
            <script id="shader-vs" type="x-shader/x-vertex">
            #define SCALE 50.0
            
            attribute vec3 aPosition;
            attribute vec2 aTexture;

            varying vec3 normals;
            varying vec3 fragPos;
            varying vec2 textureCoord;

            uniform mat4 model;
            uniform mat4 view;
            uniform mat4 projection;
            uniform mat3 normal;
            uniform float time;


            float calculateSurface(float x, float z) {
                float y = 0.0;
                y += (sin(x * 1.0 / SCALE + time * 1.0) + sin(x * 2.3 / SCALE + time * 1.5) + sin(x * 3.3 / SCALE + time * 0.4)) / 3.0;
                y += (sin(z * 0.2 / SCALE + time * 1.8) + sin(z * 1.8 / SCALE + time * 1.8) + sin(z * 2.8 / SCALE + time * 0.8)) / 3.0;
                return y;
            }

            void main(){
                fragPos = vec3(model * vec4(aPosition, 1.0));
                float strength = 1.0;
                //fragPos.y += strength * calculateSurface(fragPos.x, fragPos.z);
                //fragPos.y -= strength * calculateSurface(0.0, 0.0);
                textureCoord = aTexture;
                gl_Position = projection * view * vec4(fragPos, 1.0);
            }
            </script>
            <script id="shader-fs" type="x-shader/x-fragment">
            precision highp float;
            struct Light {
                vec3 position;
                vec3 ambient;
                vec3 diffuse;
                vec3 specular;
            };
            varying vec3 fragPos;
            varying vec2 textureCoord;

            uniform vec3 viewPos;
            uniform Light light;

            uniform sampler2D normalSampler;
            uniform samplerCube skybox;
            uniform float detalX;

            void main() {

            float z = gl_FragCoord.z / gl_FragCoord.w;
            const float LOG2 = 1.442695;
            float density = 0.005;
            float normalFactor = exp(  -density * density *  z *  z * LOG2 );
            normalFactor = clamp(normalFactor, 0.0, 1.0);

            vec4 normalTex1 = texture2D(normalSampler, vec2(textureCoord.s + detalX/1024.0, textureCoord.t - detalX/1024.0));
            vec3 normalTex2 = texture2D(normalSampler, vec2(textureCoord.t, textureCoord.s)).rgb;
            vec3 normal1 = normalize(vec3(normalTex1.r * 2.0 - 1.0, normalTex1.b,normalTex1.g*2.0-1.0));
            vec3 normal2 = normalize(vec3(normalTex2.r * 2.0 - 1.0, normalTex2.b,normalTex2.g*2.0-1.0));

            vec3 normal = mix(normal1,normal2,0.2);

            normal = mix(vec3(0.0,1.0,0.0),normal,0.2);

            normal = mix(vec3(0.0,1.0,0.0),normal,normalFactor);

            vec3 viewDir = normalize(viewPos - fragPos);

            vec3 I = normalize(fragPos - viewPos);
            vec3 R = reflect(I, normal);
            vec3 reflection = textureCube(skybox, R).rgb;

            float ratio = 1.00 / 1.33;
            vec3 Rr = refract(I, normal , ratio);
            vec3 refraction  = textureCube(skybox, Rr).rgb;

            float reflectivity = 0.02;
            float theta = max( dot( viewDir, normal ), 0.0 );
            float reflectance = reflectivity + ( 1.0 - reflectivity ) * pow( ( 1.0 - theta ), 2.0 );

            vec3 reflectanceColor = mix( refraction, reflection, reflectance );

            gl_FragColor =  vec4(reflectanceColor,1.0);

            }
            </script>
    </head>
<body>
<div id="container">
    <div id="canvas">
        <canvas id="glcanvas"></canvas>
    </div>
</div>
</body>
</html>
